<script lang="ts" setup="">
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue'

let { width, height } = defineProps({
    width: {
        type: String,
        default: '900px'
    },
    height: {
        type: String,
        default: '400px'
    }
})

const myEchart = echarts,
    pieChart = ref<HTMLElement>()

onMounted(() => {
    initChart()
})

function initChart() {
    let chart = myEchart.init(pieChart.value as unknown as HTMLElement)
    chart.setOption({
        series: [
            {
                type: 'pie',
                data: [
                    {
                        value: 335,
                        name: '直接访问'
                    },
                    {
                        value: 234,
                        name: '联盟广告'
                    },
                    {
                        value: 1548,
                        name: '搜索引擎'
                    }
                ]
            }
        ]
    })
    window.onresize = function () {
        chart.resize()
    }
}
</script>

<template>
    <div
        ref="pieChart"
        :style="{ width, height }"
    ></div>
</template>

<style lang="scss" scoped></style>
